<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06.模板的动态数据</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.2/lib/template-web.js"></script>
</head>
<body>
    <!-- 
        js中 对象转为字符串 JSON.stringify()
             字符串转为对象 JSON.parse()
     -->
    <div id="divBoxNode">
    </div>
    <script id="boxTemplate" type="text/html">
        <h1>{{title}}</h1>
        {{#subTitle}}
        <hr>
        {{if age < 18 }}
        <div>未成年</div>
        {{else if age >= 18 && age <= 28 }}
        <div>青年</div>
        {{else}}
        <div>中年</div>
        {{/if}}
        <hr>
        <ul>
            {{each stus as stu index}}
               <li>{{index+1}}-{{stu.id}}-{{stu.name}}-{{stu.age}}</li>
            {{/each}}
        </ul>
        <ul>
            <!-- 遍历出来的内容$value 索引值是 $index -->
            {{each stus }}
               <li>{{$index+1}}-{{$value.id}}-{{$value.name}}-{{$value.age}}</li>
            {{/each}}
        </ul>
    </script>

    <script>
        var obj = {
            title: '我是一个标题111',
            subTitle: "<h1>我是一个副标题</h1>",
            age: 1, // 页面输出  18之前 18 到28 青年  38 以上中年  
            stus: [{
                    id: 1001,
                    name: "小明",
                    age: 18
                },
                {
                    id: 1002,
                    name: "小红",
                    age: 19
                },
                {
                    id: 1003,
                    name: "韩梅",
                    age: 15
                },
                {
                    id: 1004,
                    name: "吉姆",
                    age: 17
                }
            ]
        }

        //console.dir(template);
        // 1 将模板渲染成html
        var html = template("boxTemplate")(obj)

        divBoxNode.innerHTML = html
    </script>

</body>

</html>